<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.4.8/vue-router.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .herder {
            height: 100px;
            background-color: hotpink;
        }

        .left {
            float: left;
            width: 30%;
            height: 500px;
            background-color: aqua;
        }
        .right {
            float: left;
            width: 70%;
            height: 500px;
            background-color: blue;
        }



        li {
            font-size: 30px;
            color: red;
        }

        ul {
            list-style: none;
        }

        .green {
            float: left;
            width: 100%;
            height: 500px;
            background-color: lawngreen;

        }

        .yellow {
            float: left;
            width: 100%;
            height: 500px;
            background-color: yellow;
        }

        .red {
            float: left;
            width: 100%;
            height: 500px;
            background-color: red;
        }

        .black {
            float: left;
            width: 100%;
            height: 500px;
            background-color: black;
        }
    </style>
</head>

<body>
    <div id='app'>
        <div class="herder">

        </div>
        <router-view></router-view>
        
    </div>



    <template id="left">
        <div>


            <div class="left">
                <ul>
                    <li>
                        <router-link to="/index/yellow">黄色</router-link>
                    </li>
                    <li>
                        <router-link to="/index/green">绿色</router-link>
                    </li>
                    <li>
                        <router-link to="/index/red">红色</router-link>
                    </li>
                    <li>
                        <router-link to="/index/black">黑色</router-link>
                    </li>
                </ul>
            </div>
            <div class="right">
                <router-view></router-view>
            </div>
            
            <!-- <router-view name="yellow"></router-view> -->

        </div>
    </template>
    <script>
        let left = {
            template: "#left"
        }
    </script>



    <!-- 黄色 -->
    <template id="yellow">
        <div class="yellow">

        </div>
    </template>
    <script>
        let yellow = {
            template: "#yellow"
        }
    </script>
    <!-- 黄色结束 -->

    <!-- 绿色 -->
    <template id="green">
        <div class="green">
            我是儿子
        </div>
    </template>
    <script>
        let green = {
            template: "#green"
        }
    </script>
    <!-- 绿色结束 -->


    <!-- 红色 -->
    <template id="red">
        <div class="red">
            我是儿子
        </div>
    </template>
    <script>
        let red = {
            template: "#red"
        }
    </script>
    <!-- 红色结束 -->
    <!--  -->
    <!-- 黑色 -->
    <template id="black">
        <div class="black">
            我是儿子
        </div>
    </template>
    <script>
        let black = {
            template: "#black"
        }
    </script>
    <!-- 黑色结束 -->
    <script>
        let router = new VueRouter({
            routes: [
                {
                    path: "/",
                    redirect: "/index"
                },
                {
                    path: "/index",
                    component:left,
                    children: [
                        {
                            path: "yellow",
                            components: {
                                default: yellow,
                                yellow: yellow,
                            },

                        },
                        {
                            path: "red",
                            component: red
                        },
                        {
                            path: "black",
                            component: black
                        },
                        {
                            path: "green",
                            component: green
                        }
                    ]
                },
                {
                    path: ""
                }


            ]
        })

        const vm = new Vue({
            el: '#app',
            data: {
            },
            router
        })
    </script>
</body>

</html>